<script setup>
import {onBeforeMount, ref} from "vue";
import {menu} from "@/dict/menuDict.js";

const props = defineProps({
  menu:{
    type:Object,
    default:{}
  }
})

const menuTree = ref({})

onBeforeMount(() => {
  menuTree.value = props.menu
})

</script>

<template>
<div>
  <div v-if="menuTree.type === menu.type.FUNCTION && !menuTree.hidden">
    <el-menu-item :index="menuTree.name" :route="menuTree.url">
      {{menuTree.name}}
    </el-menu-item>
  </div>
  <div v-if="menuTree.type === menu.type.MENU && !menuTree.hidden" >
    <el-sub-menu :index="menuTree.name">
      <template #title>
<!--        <el-icon><location /></el-icon>-->
        <span>{{menuTree.name}}</span>
      </template>
      <menu-item v-for="item in menuTree.child" :menu="item"/>
    </el-sub-menu>
  </div>
</div>
</template>

<style scoped>

</style>
